<template>
    <div class="todoAdd">
        <input type="text" v-model="todoContent" @keyup.enter="emitAddTodo">
        <button class="btn" @click="emitAddTodo">
            <i class="btnPlus"></i>
        </button>
    </div>
</template>

<script>
import { ref } from '@vue/reactivity';
export default {
    name: "TodoAdd",
    props: ["tid"],
    setup(props,context) {
        // return 
        return useEmitAddTodo(props.tid,context.emit);
    },
};

// 向父组件发送添加的文本信息
function useEmitAddTodo(tid,emit) {
    const todoContent = ref("");

    const emitAddTodo = () => {
        console.log(todoContent.value);
        const todo = {
            id: tid,
            content: todoContent.value,
            completed: false,
        }
        emit("add-todo",todo);
        todoContent.value = "";
    };

    return {
        todoContent,
        emitAddTodo
    };
}


</script>

<style>
  .todoAdd {
    position: relative;
  }
  .todoAdd input {
    border-radius: 20px;
    height: 43px;
    margin: 0 auto;
    width: 95%;
    border: none;
    outline: none;
    padding-left: 15px;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
  }
  .todoAdd button {
    position: absolute;
    right: 5%;
    bottom: 4%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(#c0a5f3,#7f95f7);
    color: white;

    cursor: pointer;
  }
  .todoAdd .btnPlus {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
    background-size: 50% 2px, 2px 50%;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>